Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
Heroicons – 免費商用 Icons SVG 線上圖標，可直接在 HTML 中使用 CSS 類別元素顯示 Icons
Heroicons 是由 Tailwind CSS 的製作商所免費提供的線上 SVG 圖標素材資源，在網站當中提供了兩種不同的尺寸與樣式，並且所有 Icons 都已經經過預先優化，同時能讓使用者直接複製並貼至 HTML 中顯示。
用 AI 摘要這篇文章：
Heroicons 是 Tailwind CSS 團隊打造的免費開源 SVG 圖標庫，收錄 324 個高品質圖標，提供 Outline、Solid、Mini、Micro 四種變體，MIT 授權可完全商用，支援 React 與 Vue 元件化使用。
網站名稱：Heroicons
網站網址：https://heroicons.com/
目錄
Heroicons 是什麼
Heroicons 是由 Tailwind CSS 創建者 Adam Wathan 與 UI 設計師 Steve Schoger 共同開發的 SVG 圖標庫。截至 2026 年 5 月，最新版本為 v2.2.0（2024 年 11 月發布），GitHub 星數超過 23,500，是前端圈最受歡迎的免費圖標方案之一。
這組圖標最初是為 Tailwind CSS 官方文件設計的內部資源，因為品質高、風格百搭，後來獨立為開源專案。每個圖標都經過像素級優化，在 Retina 螢幕上依然清晰銳利。圖標命名採用語義化慣例（例如 HomeIcon、UserIcon、SearchIcon），在程式碼中閱讀直覺，搜尋時也容易定位。
與 Feather Icons 相比，Heroicons 提供更多變體選擇（四種 vs 一種），而且有官方維護的 React 和 Vue 套件。如果你曾用過 Tailwind Ink 等 Tailwind 生態系工具，對這種注重開發者體驗的設計哲學應該不陌生。
四種圖標變體差異
Heroicons v2.2 提供四種圖標變體，每種對應不同的使用場景：
| 變體 | 網格尺寸 | 設計方式 | 適合場景 |
|---|---|---|---|
| Outline | 24 x 24 | 描邊（stroke） | 導航列、工具列的預設狀態 |
| Solid | 24 x 24 | 填充（fill） | 按鈕強調、hover/active 狀態 |
| Mini | 20 x 20 | 填充（fill） | 表格、下拉選單、緊湊 UI |
| Micro | 16 x 16 | 填充（fill） | 極小空間、高密度介面 |
Mini 變體是 v2.0 新增的，而 Micro 變體則在 v2.1.0（2023 年 12 月）加入，專為高密度 UI 設計，例如程式碼編輯器的行號欄、極小的狀態指示器等場景。截至 2026 年 5 月，Outline、Solid、Mini 各有 324 個圖標，Micro 有 316 個。
實務上的搭配模式：預設狀態用 Outline，互動後（hover、active）切換成 Solid，空間受限處用 Mini 或 Micro。四種變體的設計語言一致，在同一個專案中混搭不會產生視覺衝突。這與 Tabler Icons、Remix Icon 等圖標庫的多變體設計理念相似。
MIT 授權與商用須知
Heroicons 採用 MIT 授權，這是開源界最寬鬆的授權之一。核心條款：
- 可以自由使用、複製、修改、合併、出版、散布、再授權或銷售
- 商用完全不受限，免授權費，無須署名
- 唯一要求：原始碼中保留版權聲明與授權條款文字
- MIT 不要求衍生作品開源（與 GPL 不同），也沒有專利條文（與 Apache 2.0 不同）
實際操作上，你可以把 Heroicons 圖標嵌入商業網站、SaaS 產品、付費 WordPress 佈景主題或行動應用程式，不需額外付費也不用在網站上標注來源。多數開發者會在專案的 README 或 LICENSE 檔案中統一列出開源資源，這是對貢獻者的尊重但非強制。如果你需要更多可商用圖標，可以參考 Simple Icons（品牌圖標）或 FreeImages 等友善授權素材。
線上使用教學：搜尋、複製與嵌入
Heroicons 不需要註冊帳號或安裝軟體，直接從 官方網站 即可操作。完整流程不超過 10 秒。
搜尋與瀏覽圖標
開啟官網後，在搜尋框輸入英文關鍵字即可定位圖標。例如輸入「home」找房屋圖標、「user」找使用者圖標、「arrow」找箭頭類圖標。搜尋支援模糊匹配，即使關鍵字不精確也能找到相關結果。不確定關鍵字時，直接捲動瀏覽全部圖標也行。
搜尋框下方可切換四種變體。點擊不同標籤後，所有圖標即時切換風格，方便比較同一圖標在不同變體下的呈現。瀏覽體驗與 SVG Repo、Heroicons.dev 類似。
複製 SVG 與 JSX 格式
找到目標圖標後，將滑鼠移入圖標上方，會出現「Copy SVG」與「Copy JSX」兩個按鈕。「Copy SVG」複製純 SVG 程式碼，適合 HTML 直接使用；「Copy JSX」複製 React JSX 格式，適合 React 專案。
複製後的 SVG 程式碼格式如下：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path fill-rule="evenodd" d="..." clip-rule="evenodd" />
</svg>這段程式碼直接貼入 HTML 就能顯示圖標。比起在 FindIcons 或 IcoMoon App 上下載檔案再匯入，效率高出許多。SVG 是向量格式，自由縮放不會出現鋸齒。
自訂圖標顏色與尺寸
Heroicons 的 SVG 使用 currentColor 作為填色設定，圖標會自動繼承父元素的文字顏色。你只需要在 SVG 或父容器上設定 CSS 的 color 屬性就能改變圖標顏色。尺寸則透過 width 和 height 控制。
這個設計在深色/淺色模式切換時特別好用：改變 body 的文字顏色，所有 Heroicons 圖標就會自動切換，不需要額外的 CSS 媒體查詢。
如果使用 Tailwind CSS，設定更直接。加上 w-6 h-6 調整大小、text-blue-500 設定顏色，即可完成自訂。這種以 CSS 類別控制外觀的方式，與 CSS.GG 的純 CSS 圖標理念相似，但 Heroicons 使用 SVG 格式，縮放不失真。你也可以參考 CSS Gradient 或 CSS box-shadow examples by CSS Scan 學習更多 CSS 技巧。
進階用法還包括搭配 Tailwind 的 animate-spin 讓載入圖標旋轉、animate-pulse 讓圖標閃爍，或用 transition-colors 讓顏色變化更流暢。需要更多 CSS 靈感可以參考 CSS Background Patterns。
開發者整合：npm 安裝與 React/Vue 使用
除了手動複製 SVG，Heroicons 提供了 npm 套件讓你在 React 或 Vue 專案中以元件方式使用圖標。這樣做的好處是程式碼更乾淨、Tree-shaking 只打包實際用到的圖標、後續維護更輕鬆。
npm 安裝
React 專案：
npm install @heroicons/reactVue 專案：
npm install @heroicons/vue截至 2026 年 5 月，兩個套件的最新版本都是 v2.2.0（2024 年 11 月發布），其中 @heroicons/react 已支援 React 19。
Import 路徑決定變體。路徑中的數字代表網格尺寸，最後一段代表風格：
@heroicons/react/24/outline：24×24 描邊@heroicons/react/24/solid：24×24 填充@heroicons/react/20/solid：20×20 Mini@heroicons/react/16/solid：16×16 Micro
React 中使用
import { HomeIcon } from '@heroicons/react/24/outline'
function Navbar() {
return (
<nav>
<HomeIcon className="w-6 h-6 text-blue-500" />
<span>首頁</span>
</nav>
)
}切換變體只需改變 import 路徑：
// Solid 變體
import { HomeIcon } from '@heroicons/react/24/solid'
// Mini 變體
import { HomeIcon } from '@heroicons/react/20/solid'
// Micro 變體
import { HomeIcon } from '@heroicons/react/16/solid'Vue 與其他框架整合
<script setup>
import { HomeIcon } from '@heroicons/vue/24/outline'
</script>
<template>
<HomeIcon class="w-6 h-6 text-blue-500" />
</template>Vue 的使用方式與 React 幾乎一致，只是 import 來源改成 @heroicons/vue。對於 Svelte、Angular 等其他框架，直接從官網複製 SVG 程式碼嵌入即可。如果你的專案有使用 快取外掛 或 Cloudflare CDN，搭配 Tree-shaking 能進一步提升載入效能。更多 WordPress 效能優化可以參考 WordPress 速度優化指南。
在 WordPress 中使用 Heroicons
WordPress 有兩種常見的嵌入方式，都不需要安裝額外外掛。
自訂 HTML 區塊嵌入
在區塊編輯器中加入「自訂 HTML」區塊，貼上從官網複製的 SVG 程式碼即可。搭配 inline style 能直接控制圖標的外觀：
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
style="width: 24px; height: 24px; color: #3B82F6;">
<path fill-rule="evenodd" d="..." clip-rule="evenodd" />
</svg>佈景主題整合
如果你在開發 WordPress 佈景主題，可以在 PHP 模板中透過 file_get_contents() 讀取 SVG 檔案，或直接在模板中嵌入 SVG 程式碼。Heroicons 的 MIT 授權讓你可以合法地將圖標包含在付費佈景主題中銷售。選擇佈景主題時，可以參考 WordPress 佈景主題推薦。圖標使用不會拖慢網站速度，搭配 網站速度測試 工具可以驗證。對於圖片格式優化，WebP 格式轉換 也是值得搭配的做法。
Heroicons 與其他圖標庫比較
| 圖標庫 | 圖標數量 | 變體數 | 授權 | 框架套件 | 適合誰 |
|---|---|---|---|---|---|
| Heroicons | 324 | 4 種 | MIT | React, Vue | Tailwind CSS 使用者、Web 開發者 |
| Feather Icons | 200+ | 1 種 | MIT | React, Vue | 極簡美學愛好者 |
| Tabler Icons | 558+ | 2 種 | MIT | React, Vue | 需要高辨識度的專案 |
| CSS.GG | 700+ | 1 種 | MIT | 純 CSS | 零外部依賴需求者 |
| Ionicons | 1,200+ | 3 種 | MIT | Web, iOS, Android | 跨平台專案 |
| Remix Icon | 2,000+ | 2 種 | MIT | React, Vue | 需要大量圖標的專案 |
如果你已經在使用 Tailwind CSS，Heroicons 是最自然的選擇，設計語言完全契合，官方維護的 React 和 Vue 套件讓整合毫不費力。但如果你的專案需要更多圖標數量或跨平台支援，Remix Icon 和 Ionicons 提供更豐富的圖標集。也可以搭配 IconPark（字節跳動出品，1,287+ 圖標）或 Emblemicons（1,000+ 圖標）來補充 Heroicons 沒有涵蓋的圖標。
Figma 與設計工具整合
Figma Community 上有官方的 Heroicons 組件庫，包含四種變體的所有圖標，支援 Figma 的 Component 屬性功能，可快速切換圖標與變體。使用體驗與 Free Deca UI Kit、UI Design Daily 等設計資源類似。
非 Figma 使用者可以從 GitHub 儲存庫下載完整 SVG 檔案集，匯入 Sketch、Adobe XD 等工具。需要進一步優化 SVG 體積時，SVGOMG 是好用的壓縮工具，Compressor.io 則提供更多圖片壓縮選項。如果需要在網頁中產生自訂圖形元素，Blobs 是有趣的輔助工具，而 Clay Mockups 能幫助提升 Mockup 品質。
適合誰與不適合誰
適合 Heroicons 的情況：
- 你正在使用 Tailwind CSS，需要風格統一的圖標方案
- 專案以 Web 為主，需要 React 或 Vue 的元件化圖標
- 你重視圖標品質與一致性，勝過單純追求數量
- 需要在設計工具（Figma）與開發之間保持視覺一致
不適合 Heroicons 的情況：
- 你的專案需要超過 324 個圖標，而且不願意混搭多個圖標庫
- 需要跨平台（iOS/Android 原生）的圖標方案，Ionicons 更合適
- 你使用 Icon Font 方案且不想遷移到 inline SVG
- 需要彩色的圖標（Heroicons 只有單色）
更多免費圖標與設計資源
如果你需要更多元的圖標選擇，以下資源都值得收藏：
開源圖標庫
- Remix Icon — 2,000+ 開源圖標，MIT 授權，涵蓋幾乎所有常見 UI 場景
- Feather Icons — 200+ 簡約風格圖標，極簡美學
- Tabler Icons — 558+ 高品質圖標，支援線上客製化樣式
- IconPark — 字節跳動出品，1,287+ 圖標，可即時調整外觀參數
- LineIcons — 2,000+ 線形圖標，多種格式下載
商用圖標資源
- Icons8 — 一站式設計資源平台，圖標、圖片、向量插圖、音樂
- Iconshock — 200 萬+ 免費圖標，$99 美元終身商用方案
- Flaticon — 全球最大免費圖標庫，署名即可商用
- IcoMoon App — 5,500+ 圖標，可自訂圖標字型
- Iconstore — 234+ 高畫質圖標集合包，CC0 授權
- Emblemicons — 1,000+ 產品開發與業務展示圖標
更多免費素材可以參考 可商用無版權免費圖庫懶人包（47 個優質資源網站）和 ManyPixels Gallery（2,500+ SVG/PNG 插圖素材）。需要品牌圖標則推薦 Simple Icons。尋找各種風格的圖標時，FindIcons 作為全球最大的圖示搜尋引擎也很好用。圖標資源選擇也可以參考 Iconhub 和 iconmonstr。
三個下一步
- 到官網試用搜尋功能：前往 heroicons.com，搜尋你專案中需要的圖標關鍵字（例如 home、settings、user），確認是否有對應圖標。預期結果：10 秒內複製到 SVG 程式碼。
- 決定使用方式：如果你是 React 或 Vue 開發者，執行
npm install @heroicons/react或npm install @heroicons/vue安裝套件；如果是純 HTML 或 WordPress 專案，直接從官網複製 SVG 貼入。判斷標準：有建置工具就用 npm，沒有就複製 SVG。 - 選定變體搭配規則：在團隊中約定預設狀態用 Outline、互動狀態用 Solid、緊湊空間用 Mini 或 Micro。預期結果：全站圖標風格一致，不會出現同一頁面混搭不同圖標庫的狀況。
Heroicons 常見問題 FAQ
Heroicons 可以免費商用嗎？
可以。Heroicons 採用 MIT 授權，商用完全免費，無須署名，也不需支付授權費用。你可以在商業網站、SaaS 產品、付費佈景主題中使用，甚至修改後再授權銷售。唯一要求是在原始碼中保留版權聲明。
Heroicons 有多少個圖標？
截至 2026 年 5 月，Outline、Solid、Mini 三種變體各有 324 個圖標，Micro 變體有 316 個。圖標數量會隨版本更新增加，可以在 GitHub 儲存庫查看最新的完整列表。
如何在 WordPress 中使用 Heroicons？
兩種方式：使用區塊編輯器的「自訂 HTML」區塊直接貼上 SVG 程式碼，或透過佈景主題的 PHP 模板嵌入。都不需要安裝額外外掛。更多優化技巧可以參考 WordPress 速度優化指南。
Heroicons 支援哪些前端框架？
官方提供 @heroicons/react（支援 React 19）和 @heroicons/vue 兩個 npm 套件。對於 Svelte、Angular 等其他框架，直接複製 SVG 程式碼嵌入即可。
Heroicons 圖標會影響網站速度嗎？
不會。Heroicons 使用 inline SVG，不產生額外 HTTP 請求，不需要載入外部字體檔案。每個圖標的 SVG 體積通常不到 1KB。搭配 React/Vue 套件的 Tree-shaking 機制，只有實際使用的圖標會被打包。與傳統 Icon Font（例如 Font Awesome，整套字型 50-100KB）相比，inline SVG 在效能和使用者體驗上都有明顯優勢。你可以用 網站速度測試 工具或 GTMetrix / GiftOfSpeed 來驗證。
